<template>
	<view class="content">
		<view class="headers">
			<scroll-view :scroll-top="scrollTop" :scroll-x="true" class="view" v-for="(item,i) in dateArray" :key="i">
				<view>
					<text class="week">{{ item.week }}</text>
					<text :class="[item.is_check ? 'sun1' : 'sun']"  @click="getDay(item,i)">{{ item.day }}</text>
				</view>
			</scroll-view>
		</view>

		<view class="headers_title">
			<view class="view"></view>
			<text>老师展示</text>
		</view>

		<view class="scrollBody">
			<view class="scroll_headers">
				<view v-for="(item,index) in columns" :key="index" class="Flex">
					<text>{{item.name}}</text>
				</view>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
					radius="0"></u--image>
			</view>
			<scroll-view scroll-x="true" class="view">
				<view v-for="(item,index) in lists" :key="index">
					<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx"
						radius="0" shape="circle"></u--image>
					<text>{{item.name}}</text>
				</view>	
			</scroll-view>
		</view>
		
		<view class="headers_title NewFlex">
			<view class="flex">
				<view class="view"></view>
				<text>预约老师时间</text>
			</view>
			<view class="flex">
				<text class="time">全部时间</text>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
					radius="0"></u--image>
			</view>
		</view>
		
		<view class="Box">
			<view v-for="(item,index) in lists" :key="index" class="BoxView">
				<view class="BoxOne">
					<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx"
						radius="0" shape="circle"></u--image>
					<view class="BoxContent">
						<view class="BoxTop marginBottom">
							<text class="title">{{item.name}}</text>
							<text style="color:#888888;margin-left:15rpx;">美国教师</text>
						</view>
						<view class="BoxTop">
							<text class="Newtitle">{{item.speciality}}</text>
						</view>
					</view>
				</view>
				<view class="button_flex">
					<button style="background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);">单次预约</button>
					<button style="background-color:#efefef !important;color: #000;">1V1固定预约</button>
					<button style="background-color:#efefef !important;color: #000;">1V2固定预约</button>
				</view>
			</view>
		</view>
		
		<view class="tips">
			<text class="title">温馨提示</text>
			<view class="viewFlex">
				<view>
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>可预约10天内课程 预约课程请提前6小时</text>
				</view>
				<view>
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>可预约10天内课程 预约课程请提前6小时</text>
				</view>
				<view>
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>可预约10天内课程 预约课程请提前6小时</text>
				</view>
				<view>
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>可预约10天内课程 预约课程请提前6小时</text>
				</view>
				<view>
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>可预约10天内课程 预约课程请提前6小时</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	 import moment from 'moment';
	 import {
	 	teacherLists,
	 	collectTeacher,
	 	teacher_category,
	 	teacherCountry
	 } from '../../../api/Teacher.js';
	export default {
		data() {
			return {
				columns: [{
					name: '全部',
					id:0
				}], //学习语种数据源
				choose_index:0,
				dateArray:[],
				scrollTop: 0,
				time:'',
				courses: [{
					name: '全部'
				}, {
					name: '英语'
				}, {
					name: '法语'
				}, {
					name: '俄语'
				}],
				req:{
					teacher_id:0,
					shop_id:0,
					user_vip_id:1,
					date:'',
					start_time:''
				},
				lists:{
					
				},
			}
		},
		mounted(){
			this.generateDateArray();	
		},
		onLoad(){
			this.teacher_category();
			this.teacherLists();
			this.req.shop_id = uni.getStorageSync('shop_id') ?? 1;	
			console.log(1222)
			console.log(uni.getStorageSync('shop_id'))
		},
		methods: {
			/**
			@method 老师列表
			**/
			async teacherLists() {
				try {
					const res = await teacherLists({
						shop_id: uni.getStorageSync('shop_id') ?? 1,
						page: 1,
						limit: 999
					});
					this.lists = [...res.data.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师分类
			**/
			async teacher_category() {
				try {
					const res = await teacher_category();
					this.columns = [...this.columns,...res.data];
					console.log(this.columns)
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			generateDateArray() {
				const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
				const startDate = moment(); // 今天的日期
				const endDate = moment().add(6, 'months'); // 半年后的日期
		
				const dateArray = [];
				let currentDate = startDate;
				
				while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
					dateArray.push({
						day: currentDate.date(),
						week: weekDays[currentDate.day()],
						date : currentDate.year()+'-'+currentDate.month()+'-'+currentDate.date(),
						is_check : 0
					});
					currentDate = currentDate.add(1, 'day'); // 增加一天
				}
				dateArray[0].is_check = 1;
				this.dateArray = dateArray;
			},
			getDay(item,i){
				console.log(item);
				this.dateArray[this.choose_index].is_check = 0;
				this.dateArray[i].is_check = 1;
				this.choose_index = i;
				this.req.date = item.date;
				//this.teacher_info(this.req.teacher_id,this.req.date)
				
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.content {
		width: auto;
		height: 30vh;
		padding: 30rpx;
		
		background: linear-gradient(182deg, #EDF6FD 0%, #C8EEFD 0%, #f7f7f7 72%, #f7f7f7 100%);
		position: relative;
		
		.tips{
			width:auto;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			padding:30rpx;
			margin-top:20rpx;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
			}
			.viewFlex{
				width:auto;
				margin-left:10rpx;
				view{
					display: flex;
					align-items: center;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		
		.Box{
			.BoxView{
				width:auto;
				margin:0px auto;
				background-color: #fff;
				border-radius:20rpx;
				padding:30rpx 30rpx 30rpx 30rpx;
				margin-top:20rpx;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
			}
			.button_flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:20rpx;
				
			}
			.BoxOne{
				display: flex;
				align-items: center;
				.marginBottom{
					margin-bottom:10rpx;
				}
				.BoxTop{
					margin-left:20rpx;
					display: flex;
					align-items: center;
					text{
						display: block;
						font-size:24rpx;
					}
					
					.title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}
					.Newtitle{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
					}
				}
			}
			button{
				width: auto;
				height: 55rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				border-radius: 46rpx;
				margin:0px;
				display: flex;
				justify-content: center;
				align-items: center;
				color:#fff;
			}
		}
		
		.scrollBody {
			background: linear-gradient( 180deg, #E1F7FF 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			border: 2rpx solid #DBE9FF;
			margin-top:20rpx;
			padding:0rpx 30rpx 20rpx 30rpx;
			.scroll_headers {
				width: auto;
				height:100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.Flex {
					text {}
				}
			}
			.view {
				width: 100%;
				white-space: nowrap;
				view{
					width: 130rpx;
					display: inline-block;
					margin-right:20rpx;
					/deep/ .u-image{
						display: block;
						margin:0px auto;
					}
					text{
						display: block;
						text-align: center;
					}
				}
			}	
		}

		.headers {
			width: auto;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 30rpx 20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:30rpx;
			box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(218,218,218,0.5);
			overflow: scroll;
			white-space: nowrap;

			.view {
					width: 100%;
					white-space: nowrap;
			
					.week {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 24rpx;
						color: #333333;
			
					}
			
					.sun {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						margin-top: 10rpx;
					}
					.sun1 {
						background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						margin-top: 10rpx;
					}
			
					view {
						width: 50rpx;
						display: inline-block;
						white-space: nowrap;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						// border:1px solid red;
						padding-left: 10rpx;
						padding-right: 10rpx;
						flex-direction: column;
						text {
							display: inline-block;
							text-align: center;
			
						}
					}
				}
			}
		
		.NewFlex{
			justify-content: space-between;
			/deep/ .u-image{
				margin-left:10rpx;
			}
			.time{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4C4C4C;
			}
		}
		
		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029CFE;
				border-radius: 6rpx;
			}
			
			.flex{
				display: flex;
				align-items: center;
			}
			
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}
	}
</style>